<template>
  <div>
    <div id="w">
      <div class="card" v-for="(item, index) in list" :key="index">
        <div style="position: relative;">
          <img :id="index + 'P'" src="">
          <div style="position: absolute;top: 49px;left: 60px;">
            <Avatar :src="staticUrl + item.skuImagePath" shape="square"></Avatar>
          </div>
        </div>
        <div style="height: 80px;margin-top: 16px;">
          <p>货号：{{ item.articleNumber }}</p>
          <div style="overflow: hidden;">
            <div style="float: left;">名称：</div>
            <div style="float: left;width: 120px;">
              {{ item.title }} <span style="font-weight: 800;"> · </span> {{ item.goodsSkuName }}
            </div>
          </div>
          <p>零售价：<span style="font-weight: 800;">{{ item.retailPrice / 100  + '￥' }}</span></p>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import QRCode from 'qrcode'
export default {
  name: 'sku-code',
  data () {
    return {
      list: [],
      options: {
        errorCorrectionLevel: 'H',
        type: 'image/jpeg',
        rendererOpts: {
          quality: 0.3
        },
        margin: 0,
        width: 130
      },
      count: 0
    }
  },
  methods: {
    setList (goods) {
      /*
      * 设置二维码商品(添加)
      * url: /#/detailspage?goodsId=133&detailsjump=2&type=1&skuId=280
      * */
      this.list.push(goods)
      let url = 'https://www.gztang.cn/mall.html#/detailspage?goodsId=' + goods.goodsId + '&detailsjump=2&type=1&skuId=' + goods.skuId
      this.$nextTick(() => {
        QRCode.toDataURL(url, this.options, (err, url) => {
          if (!err) {
            let id = this.list.length - 1 + 'P'
            let img = document.getElementById(id)
            img.src = url
          }
        })
      })
    },
    removeSku (index) {
      this.list.splice(index, 1)
    },

    getInnerHtml () {
      /*
      * 直接打印
      * */
      let html = document.getElementById('w').innerHTML
      document.body.innerHTML = html
      window.print()
      window.location.reload()
    }
  },
  created () {
  }
}
</script>

<style scoped>
  #w{
    overflow: hidden;
  }
  .card{
    float: left;
    border: 1px solid #dddee1;
    padding: 6px;
    width: 170px;
    margin: 0 8px 22px 0;
  }
  .card img{
    margin: 0 auto;
    display: block;
  }
</style>
